<template>
  <div class="shopping">
    <div
      class="super-container"
      v-show="shoppingList[0]"
      v-for="item in shoppingList"
      :key="item.id"
    >
      <van-checkbox v-model="item.checked" @click="isChecked(item.checked,item.product_id)"></van-checkbox>
      <van-swipe-cell>
        <van-card
          :num="item.number"
          :price="item.retail_price|flootPirce"
          :title="item.goods_name"
          class="goods-card"
          :thumb="item.list_pic_url"
        >
          <template #footer>
            <van-field style="background-color: #fff;" v-show="field">
              <template #input>
                <van-stepper
                  v-model="item.number"
                  @change="onChange(item.goods_id,item.id,item.number,item.product_id)"
                />
              </template>
            </van-field>
          </template>
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            @click="deletShopping(item.product_id)"
            type="danger"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
      <van-notice-bar class="wrablue" wrapable :scrollable="false">
        累计共{{cartTotal.goodsCount}}商品，可点击
        <van-button type="primary" size="small" @click="editField">{{field?'取消编辑':"编辑"}}</van-button>按钮进行商品数量修改
      </van-notice-bar>
    </div>
    <van-empty
      description="购物车空空如也"
      v-show="!shoppingList[0]"
      image="https://bpic.588ku.com/element_origin_min_pic/19/10/11/68533c6de9c320650bfe098aedb57f6a.jpg"
    ></van-empty>
    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount |shoppingPirce"
      button-text="提交订单"
      @submit="onSubmit"
      :style="{display:shoppingList[0]?'block':'none'}"
    >
      <van-checkbox v-model="checked" @click="isChecked(checked)">{{checked?'反选':'全选'}}</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import {
  GetShoppingData,
  GetDeleteShopping,
  updateChecked,
  updateField
} from "@/request/api";
export default {
  data() {
    return {
      shoppingList: [],
      cartTotal: {},
      //控制全选反选
      checked: false,
      // 进步器状态
      field: false
    };
  },
  methods: {
    init(resp) {
      this.shoppingList = resp.data.cartList;
      this.cartTotal = resp.data.cartTotal;
    },
    shopping() {},
    onSubmit() {
      // 前往订单页面
      let result = this.shoppingList.filter(val => {
        return val.checked != 0;
      });
      if (!result[0]) {
        return this.$toast.fail("请选商品");
      }
      let productIds = [];
      result.forEach(item => {
        productIds.push(item.product_id);
      });
      this.$router.push({
        name: "order",
        params: {
          productIds
        }
      });
    },
    // 删除购物车
    deletShopping(id) {
      GetDeleteShopping({
        productIds: String(id)
      }).then(resp => {
        this.init(resp);
        this.$toast.success("删除成功");
      });
    },
    // 全选反选
    isChecked(checked, ids) {
      if (ids === undefined) {
        ids = [];
        this.shoppingList.forEach(item => {
          ids.push(item.product_id);
        });
        ids = ids.join(",");
      }
      updateChecked({
        isChecked: Number(checked),
        productIds: String(ids)
      }).then(resp => {
        console.log(resp.data);
        this.init(resp);
        this.isStatus();
      });
    },
    // 进步器修改
    editField() {
      this.field = !this.field;
    },
    // 步进器输入事件
    onChange(goodsId, id, number, productId) {
      updateField({
        goodsId: goodsId,
        id,
        number,
        productId
      }).then(resp => {
        this.init(resp);
      });
    },
    isStatus() {
      for (let i = 0; i < this.shoppingList.length; i++) {
        if (!this.shoppingList[i].checked) {
          this.checked = false;
          return;
        } else {
          this.checked = true;
        }
      }
    }
  },
  mounted() {
    GetShoppingData().then(resp => {
      if (resp.errno == 0) {
        this.init(resp);
        this.isStatus();
      }
    });
  }
};
</script>

<style lang="less" scoped>
.shopping {
  background-color: #fafafa;
  .van-empty {
    background-color: #fff;
    .bottom-button {
      width: 160px;
      height: 40px;
    }
  }

  .super-container {
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    display: flex;
    margin-bottom: 10px;
    overflow: hidden;
    background-color: #fff;
    .van-card {
      background: #fff;
      .van-card__bottom {
        .van-card__price {
          color: #f00;
        }
      }
    }

    .van-checkbox {
      padding: 0 5px;
    }
    .van-card__footer {
      .van-button {
        color: #323233;
        font-size: 14px;
      }
    }

    .van-swipe-cell {
      flex: 1;
      .delete-button {
        height: 100%;
      }
    }
  }
}

/deep/.van-field__control--custom {
  justify-content: flex-end;
}
.wrablue {
  position: fixed;
  bottom: 100px;
  left: 0;
  right: 0;
}
.van-submit-bar {
  bottom: 50px;
}
</style>